<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2021/4/3
  Time: 21:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>个人主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/message2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<input type="hidden" id="id">
<%--流体容器--%>
<div class="container">
    <%--行--%>
    <div class="row">
        <div class="col-lg-12">
            <div class="jumbotron jumbotron-fluid">
                <div class="container">
                    <h1 class="display-4">宇峰健康商城</h1>
                    <p class="lead">您现在处于会员注册页面<b>(只有成为会员才能预约服务)</b>:</p>
                </div>
            </div>
        </div>
    </div>

    <%--行--%>
    <div class="row">
        <div class="col-lg-12">
            <div id="app">
                <template>
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="个人详情" name="first">
                            <div class="main-about">
                                <div class="layui-container">
                                    <div class="layui-row">
                                        <div class="tabJob">
                                            <div class="content">
                                                <img class="grz"
                                                     v-bind:src="user.eMailVerificationCode"
                                                     width="300px" height="300px"
                                                     style="position: relative;left:-200px;"/>
                                                <ol>
                                                    <li>账号:<b>{{user.account}}</b></li>
                                                    <li>用户名:<b>{{user.username}}</b></li>
                                                    <li>性别:<b>{{user.gender}}</b></li>
                                                    <li>生日:<b>{{user.birthday}}</b></li>
                                                    <li>电话:<b>{{user.telephone}}</b></li>
                                                    <li>是否注册会员:<span v-if="member==null||member==''">
                                                        <b>否</b>
                                                    </span>
                                                        <span v-else>
                                                            <b>是</b>
                                                        </span>
                                                    </li>
                                                    <li>头像更换:
                                                        <%--更换图片--%>

                                                        <el-upload
                                                                class="avatar-uploader"
                                                                action="/user/userAvatarReplacement"
                                                                :auto-upload="true"
                                                                :show-file-list="false"
                                                                :on-success="handleAvatarSuccess"
                                                                :before-upload="beforeAvatarUpload">
                                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </li>
                                                </ol>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="密码修改" name="second">
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-form-item label="旧密码">
                                    <el-input v-model="form.oldPassword" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="新密码">
                                    <el-input v-model="form.newPassword" show-password></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit(form)">确定</el-button>
                                    <el-button>取消修改</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="预约中心" name="third">
                            <el-button type="primary" icon="el-icon-edit" circle @click="printPdf">打印套餐PDF表</el-button>
                            <h2>体检套餐:</h2>
                            <el-button type="text" size="medium" @click="excel">
                                打印体检套餐Excel表
                            </el-button>
                            <template>
                                <el-table
                                        :data="querySetMealData"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            fixed
                                            label="套餐名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="sex"
                                            label="适合性别"
                                            width="180">

                                        <template slot-scope="scope" width="180">
                                            <label v-if="querySetMealData[scope.$index].sex==0">男女适用</label>
                                            <label v-if="querySetMealData[scope.$index].sex==1">男</label>
                                            <label v-if="querySetMealData[scope.$index].sex==2">女</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="age"
                                            label="适合年龄">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price"
                                            label="套餐价格">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderDate"
                                            width="200"
                                            label="预约时间">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="querySetMealData[scope.$index].orderDate==null">未知时间</label>
                                            <label v-if="querySetMealData[scope.$index].orderDate==''">未知时间</label>
                                            <label v-else>{{querySetMealData[scope.$index].orderDate}}</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderType"
                                            label="预约类型" width="200">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="querySetMealData[scope.$index].orderType==''">其他预约类型</label>
                                            <label v-if="querySetMealData[scope.$index].orderType==null">其他预约类型</label>
                                            <label v-else>{{querySetMealData[scope.$index].orderType}}</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="status"
                                            label="是否到诊">
                                        <template slot-scope="scope">
                                            <label v-if="querySetMealData[scope.$index].status=='无'">
                                                <b style="color: red">未到诊</b>
                                            </label>
                                            <label v-if="querySetMealData[scope.$index].status=='是'">
                                                <b style="color: green;">已到诊</b>
                                            </label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="attention"
                                            label="套餐注意事项">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="querySetMealData[scope.$index].attention==null">暂无注意事项</label>
                                            <label v-if="querySetMealData[scope.$index].attention==''">暂无注意事项</label>
                                            <label v-else>{{querySetMealData[scope.$index].attention}}</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="remark"
                                            label="套餐说明" width="280">
                                    </el-table-column>

                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="260">
                                        <template slot-scope="scope">
                                            <el-button v-if="querySetMealData[scope.$index].status=='无'" type="text"
                                                       size="medium"
                                                       @click="modalBox(querySetMealData[scope.$index].id)">到诊
                                            </el-button>

                                            <%--    <el-button type="text"  size="medium" @click="modalBox(querySetMealData[scope.$index].id)">到诊</el-button>--%>
                                            <%--     <el-button type="text" size="medium">打印excel表</el-button>--%>
                                            <el-button type="text" size="medium"
                                                       @click="deleteModalBox(querySetMealData[scope.$index].id)">取消套餐预约
                                            </el-button>
                                            <el-button type="text" size="medium"
                                                       @click="modifyModalBox(querySetMealData[scope.$index].orderDate,querySetMealData[scope.$index].id)">
                                                更改预约时间
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>

                            <h2>体检项目:</h2>
                            <el-button type="text" size="medium" @click="excel2">
                                打印体检项目Excel表
                            </el-button>
                            <template>
                                <el-table
                                        :data="queryCheckItemData"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            fixed
                                            label="项目名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="sex"
                                            label="适合性别"
                                            width="180">

                                        <template slot-scope="scope" width="180">
                                            <label v-if="queryCheckItemData[scope.$index].sex==0">男女适用</label>
                                            <label v-if="queryCheckItemData[scope.$index].sex==1">男</label>
                                            <label v-if="queryCheckItemData[scope.$index].sex==2">女</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="age"
                                            label="适合年龄">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price"
                                            label="价格">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderDate"
                                            label="预约时间" width="220">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="queryCheckItemData[scope.$index].orderDate==null">未知时间</label>
                                            <label v-if="queryCheckItemData[scope.$index].orderDate==''">未知时间</label>
                                            <label v-else>{{queryCheckItemData[scope.$index].orderDate}}</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderType"
                                            label="预约类型" width="200">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="queryCheckItemData[scope.$index].orderType==''">其他预约类型</label>
                                            <label v-if="queryCheckItemData[scope.$index].orderType==null">其他预约类型</label>
                                            <label v-else>{{queryCheckItemData[scope.$index].orderType}}</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="status"
                                            label="是否到诊">
                                        <template slot-scope="scope">
                                            <label v-if="queryCheckItemData[scope.$index].status=='无'">
                                                <b style="color: red;">未到诊</b>
                                            </label>
                                            <label v-if="queryCheckItemData[scope.$index].status=='是'">
                                                <b style="color: green">已到诊</b>
                                            </label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="type"
                                            label="检查类型">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="queryCheckItemData[scope.$index].type==1">检验</label>
                                            <label v-if="queryCheckItemData[scope.$index].type==2">检查</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="attention"
                                            label="项目注意事项">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="queryCheckItemData[scope.$index].attention==null">暂无注意事项</label>
                                            <label v-if="queryCheckItemData[scope.$index].attention==''">暂无注意事项</label>
                                            <label v-else>{{queryCheckItemData[scope.$index].attention}}</label>
                                        </template>
                                    </el-table-column>

                                    <el-table-column
                                            prop="remark"
                                            label="备注">
                                        <template slot-scope="scope" width="180">
                                            <label v-if="queryCheckItemData[scope.$index].remark==''||queryCheckItemData[scope.$index].remark==null">暂无备注</label>
                                            <label v-else>{{queryCheckItemData[scope.$index].remark}}</label>
                                        </template>
                                    </el-table-column>

                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="260">
                                        <template slot-scope="scope">
                                            <el-button v-if="queryCheckItemData[scope.$index].status=='无'" type="text"
                                                       size="medium"
                                                       @click="modalBox(queryCheckItemData[scope.$index].id)">到诊
                                            </el-button>
                                            <%--                                            <el-button type="text" size="medium" @click="modalBox2(queryCheckItemData[scope.$index].id)">到诊</el-button>--%>
                                            <%--     <el-button type="text" size="medium">打印excel表</el-button>--%>
                                            <el-button type="text" size="medium"
                                                       @click="deleteModalBox2(queryCheckItemData[scope.$index].id)">
                                                取消套餐预约
                                            </el-button>
                                            <el-button type="text" size="medium"
                                                       @click="modifyModalBox(queryCheckItemData[scope.$index].orderDate,queryCheckItemData[scope.$index].id)">
                                                更改预约时间
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane label="个人资料修改" name="username">
                            <el-form ref="form2" :model="form2" label-width="80px">
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="form2.username"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="gender">
                                    <el-radio-group v-model="form2.gender">
                                        <el-radio label="男" value="男" v-model="form2.gender"></el-radio>
                                        <el-radio label="女" value="女" v-model="form2.gender"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="生日">
                                    <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="form2.birthday"
                                                        style="width: 100%;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="电话">
                                    <el-input v-model="form2.telephone"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="userModification(form2)">立即创建</el-button>
                                    <el-button>取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <%--模态框--%>
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">健康套餐到诊:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                你已确定到诊了吗?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <a id="jump2">
                                    <button type="button" class="btn btn-primary" id="btn" @click="modifyVisit()">确定
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <%--模态框2--%>
                <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel2">健康项目到诊:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                你已确定到诊了吗?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <a id="jump">
                                    <button type="button" class="btn btn-primary" id="btn2" @click="modifyVisit()">确定
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <%--删除模态框1--%>
                <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel3">套餐预约取消:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                您确定要取消本次套餐预约服务吗?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" @click="deleteOrder()">确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <%--删除模态框2--%>
                <div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel4">检查项目预约取消:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                您确定要取消本次检查项目预约服务吗?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" @click="deleteOrder()">确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <%--更改时间预约--%>
                <div class="modal fade" id="exampleModal5" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel5">预约时间修改:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="orderDate3"
                                                    style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                                </el-col>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="modifyDate" id="btn3">预约
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <%--打印excel表--%>
                <div class="modal fade" id="excel" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel6">excel表打印:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                你确定要打印excel表吗?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" @click="writeExcel()">确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <%--打印excel表2--%>
                <div class="modal fade" id="excel2" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel7">excel表打印:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                你确定要打印excel表吗?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" @click="writeExcel2()">确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/message.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/static/js/axios-0.18.0.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">

    var a=null;
    var vue = new Vue({
        el: "#app",
        data: {
            queryCheckItemData: [],
            querySetMealData: [],
            id: '',
            deleteID: '',
            orderDate3: '',
            modifyId: ''
        },
        data() {
            return {
                activeName: 'first',
                user: '',
                member: '',
                form: {
                    oldPassword: '',
                    newPassword: '',
                }, form2: {
                    username: '',
                    gender:'',
                    birthday:'',
                    telephone:''
                },
                queryCheckItemData: [],
                querySetMealData: [],
                orderDate3: '',
                imageUrl: ''
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            onSubmit(form) {
                let param = new URLSearchParams();
                param.append("oldPassword", form.oldPassword);
                param.append("newPassword", form.newPassword);
                axios.post("/user/updatePassword", param).then(data => {
                    if (data.data == true || data.data == "true") {
                        this.open2();
                    } else {
                        this.open4();
                    }
                }).catch(e => {
                    this.open4();
                });
            }, userDetails() {
                axios.get("/user/userDetails").then(data => {
                    this.user = data.data;
                    if (this.user.eMailVerificationCode==null||this.user.eMailVerificationCode==''){
                        this.user.eMailVerificationCode='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                    }
                    this.form2=data.data;
                });
            }, memberDetails() {
                axios.get("/user/memberDetails").then(data => {
                    this.member = data.data;
                });
            }, open2() {
                this.$message({
                    message: '密码修改成功!',
                    type: 'success'
                });
            },
            open4() {
                this.$message.error('密码修改失败!');
            }, open3() {
                this.$message({
                    message: '你已确定到诊!',
                    type: 'success'
                });
            }, open5() {
                this.$message.error('操作失败!');
            }, queryCheckItem() {
                /**
                 * 根据用户账号显示检查项目
                 */
                axios.get("/user/queryCheckItem").then(data => {
                    this.queryCheckItemData = data.data;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, querySetMeal() {
                /**
                 * 根据用户账号显示套餐项目
                 */
                axios.get("/user/querySetMember").then(data => {
                    this.querySetMealData = data.data;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, modalBox(id) {
                /**
                 * 启动套餐的模态框方法
                 */
                this.id = id;
                $("#exampleModal").modal('show');
            }, modalBox2(id) {
                /**
                 * 启动检查项的模态框方法
                 */
                this.id = id;
                $("#exampleModal2").modal('show');
            }, modifyVisit() {
                /**
                 * 修改是否到诊
                 */
                axios.get("/user/modifyVisit", {
                    params: {
                        id: this.id
                    }
                }).then(data => {
                    if (data.data == true || data.data == 'true') {
                        this.open3();
                    } else {
                        this.open5();
                    }
                    this.queryCheckItem();
                    this.querySetMeal();
                    $("#exampleModal").modal('hide');
                    $("#exampleModal2").modal('hide');
                }).catch(e => {
                    this.open5();
                });
            },
            deleteModalBox(id) {
                /**
                 * 套餐模态框显示
                 */
                this.deleteID = id;
                $("#exampleModal3").modal('show');
            }, deleteModalBox2(id) {
                /**
                 * 检查项目模态框显示
                 */
                this.deleteID = id;
                $("#exampleModal4").modal('show');
            }, deleteOrder() {
                /**
                 * 取消预约服务
                 */
                axios.get("/user/deleteOrder/" + this.deleteID).then(data => {
                    if (data.data == true || data.data == 'true') {
                        this.$message({
                            message: '预约取消成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('预约取消失败!');
                    }
                    this.queryCheckItem();
                    this.querySetMeal();
                    $("#exampleModal3").modal('hide');
                    $("#exampleModal4").modal('hide');
                }).catch(e => {
                    this.$message.error('预约取消失败!');
                });
            }, modifyModalBox(date, id) {
                /**
                 * 获取时间
                 */
                this.orderDate3 = date;
                this.modifyId = id;
                $("#exampleModal5").modal('show');
            }, modifyDate() {
                /**
                 * 修改预约时间
                 */
                axios.get("/user/modifyDate", {
                    params: {
                        id: this.modifyId,
                        date: this.orderDate3
                    }
                }).then(data => {
                    if (data.data == true || data.data == "true") {
                        this.$message({
                            message: '预约时间修改成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('预约时间修改失败!');
                    }
                    this.queryCheckItem();
                    this.querySetMeal();
                    $("#exampleModal5").modal('hide');
                });
            }, excel() {
                $("#excel").modal('show');
            }, writeExcel() {
                /**
                 *
                 * 导出excel表
                 */
                window.location.href = "/user/WriteExcel";
                this.$message({
                    message: 'excel表生成成功!!',
                    type: 'success'
                });
                $("#excel").modal('hide');
            }, excel2() {
                $("#excel2").modal('show');
            }, writeExcel2() {
                /**
                 * 导出excel表
                 * @type {string}
                 */
                window.location.href="/user/writeCheckItemExcel";
                this.$message({
                    message: 'excel表生成成功!!',
                    type: 'success'
                });
                $("#excel2").modal('hide');
            },userModification(form){
                /**
                 * 用户修改
                 */
                axios.post('/user/userModification',{
                    "username":form.username,
                    "gender":form.gender,
                    "birthday":form.birthday,
                    "telephone":form.telephone
                }).then(data =>{
                    if (data.data==true||data.data=='true'){
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('修改失败!');
                    }
                    this.userDetails();
                    this.memberDetails();
                    this.queryCheckItem();
                    this.querySetMeal();
                }).catch(e =>{
                    this.$message.error('修改失败!');
                });
            },handleAvatarSuccess(res,file){
                /**
                 * 处理头像城功方法
                 * @type {string}
                 */
             /*   this.imageUrl=URL.createObjectURL(file.raw);*/
                this.$message({
                    message: '图片更换完成!',
                    type: 'success'
                });
                this.userDetails();
                this.memberDetails();
                this.queryCheckItem();
                this.querySetMeal();
            },beforeAvatarUpload(file){
                let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
                const isImage=types.includes(file.type);
                /**
                 * 获取文件后缀
                 * @type {boolean}
                 */
                /**
                 * 获取文件 大小
                 * @type {boolean}
                 */
                const isLt2M=file.size/1024/1024<2;
                if (!isImage){
                    this.$message.error('上传头像图片只能是JPEG,JPG,PNG,GIF,BMP格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isImage && isLt2M;
            },printPdf(){
              /*  axios.post("/user/generatePDFTable").then(data =>{
                    if (data.data==true||data.data=='true'){
                        this.$message({
                            message: 'PDF表打印完成!',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('PDF表打印失败!');
                    }
                });*/
                window.location.href="/user/generatePDFTable";
            }

        }, created() {
            this.userDetails();
            this.memberDetails();
            this.queryCheckItem();
            this.querySetMeal();
        }
    });
</script>
</html>
